<template>
  <div class="home-page">
    <div class="figure">
      <div class="home-thumb">
        <h1 class="animated">Hello, I am Paddyi.</h1>
        <!--<p class="white-color">
          you want to buy an Apple phone here? No way. It's just a learning website.
          It's just for display.</p>-->
        <p class="white-color">
          这是个开源项目，主要是交流学习使用.当然，你也可是试着回答下面问题或者出题给大家.</p>
      </div>
    </div>
    <div class="product">

      <div>
        <!--<h1>what things i am doing...</h1>-->
        <h1>那么...</h1>
        <h1>开始你的答题之旅 回答下列问题吧</h1>
      </div>
      <el-row :gutter="40" type="flex" class="row-bg" justify="center">
        <el-col :span="8"><div class="grid-content bg-purple"><a href="#" @click="handleClick(1)"><img src="../../assets/timg.jpg"></a></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"><a href="#" @click="handleClick(2)"><img src="../../assets/mysql.jpg"></a></div></el-col>
        <el-col :span="8"><div class="grid-content bg-purple"><a href="#" @click="handleClick(3)"><img src="../../assets/vue.jpg"></a></div></el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Main",
    methods: {
      handleClick(num){
        this.$router.push({
          name:'ExamGrid',
          params: {
            type:num
          }
        });
      }
    }
  }

</script>

<style scoped lang="scss">
  .home-page{
    padding-top: 1px;
  }
  .figure{
    height: 460px;
    background: url("../../assets/133101088938.jpg");
    background-size: 100% ;
  }
  .product{
    padding-top: 50px;
    height: 540px;
    color: black;
    text-align:center;
  }
  .home-thumb{
    padding-top: 100px;
    padding-right: 40px;
    padding-left: 600px;
    text-align: right;
    color: #FBFCFC;
    font-family: "微软雅黑";
  }
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }

  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    /*background: #e5e9f2;*/
  }
  .grid-content {
    margin: 20px auto;
    height: 300px;
    width: 200px;
    background: #fff;
    box-shadow: 0 0 5px #B4BCCC;
    padding: 30px 30px 0 30px;
    border-radius: 25px;

  }
  .grid-content img{
    width:100%;
    height:50%;
    display:block;
  }
  .row-bg {
    padding: 20px 0;
    /*background-color: #f9fafc;*/
  }

</style>
